<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />


<link rel="stylesheet" href="css/index.css" />

<title>Flipping Cards</title>
</head>
<body>

  <div class="row">
	<!--翻纸牌效果  -->
	<div class="col-1-of-3">
	  <div class="card">
		<div class="card__side card__side--front-1">
		 <a href="#"><img src="img/fanmian.jpg"></a>
		</div>
		<div class="card__side card__side--back card__side--back-1">
		 <a href="#"><img src="img/zhengmian.jpg"></a>
		</div>
	  </div>
	</div>
	<!--翻纸牌效果  -->
	<!--翻纸牌效果  -->
	<div class="col-1-of-3">
	  <div class="card">
		<div class="card__side card__side--front-1">
		 <a href="#"><img src="img/fanmian.jpg"></a>
		</div>
		<div class="card__side card__side--back >
		 <a href="#"><img src="img/zhengmian.jpg"></a>
		</div>
	  </div>
	</div>
	<!--翻纸牌效果  -->
	<!--翻纸牌效果  -->
	<div class="col-1-of-3">
	  <div class="card">
		<div class="card__side card__side--front-1">
		 <a href="#"><img src="img/fanmian.jpg"></a>
		</div>
		<div class="card__side card__side--back card__side--back-1">
		 <a href="#"><img src="img/zhengmian.jpg"></a>
		</div>
	  </div>
	</div>
	<!--翻纸牌效果  -->
	<!--翻纸牌效果  -->
	<div class="col-1-of-3">
	  <div class="card">
		<div class="card__side card__side--front-1">
		 <a href="#"><img src="img/fanmian.jpg"></a>
		</div>
		<div class="card__side card__side--back card__side--back-1">
		 <a href="#"><img src="img/zhengmian.jpg"></a>
		</div>
	  </div>
	</div>
	<!--翻纸牌效果  -->
  </div>


</body>
</html>
